import React from 'react';
import { useHistory } from 'react-router-dom';
import Typography from '../typography';
import SelectGroup from '../select-group';
import SelectItem from '../select-group/select-item';
import Button from '../button';
import useSelect from '../../hooks/use-select';
import questionsList from './questionList';
import styles from './index.module.scss';

const { Header } = Typography;
const Question = ({
  step,
  data,
  jumpToNextQuestion,
  jumpToLastQuestion,
  changeSelect,
}) => {
  const history = useHistory();
  const jumpToLoading = () => {
    console.log(data);
    history.push({
      pathname: '/loading',
      state: data,
    });
  };

  const { selectCombination, handleValueSelected, handleJumpToLast } =
    useSelect(step, jumpToNextQuestion, changeSelect);
  // 当前question
  const { title, answers } = questionsList.questions[step];
  // 对第四个问题特殊处理 最后三道题不记分
  return (
    <div>
      <Header type="questionTitle">{title}</Header>
      {step === 3 && (
        <div className={styles.special}>
          <div className={styles.specialTitle}>
            That sex ratio will be favored which maximizes the number of
            descendants as individal will have and hence the number of gene
            copies transmitted.
          </div>
          <div className={styles.specialAnswer}>此时你更倾向于：</div>
        </div>
      )}
      <SelectGroup
        value={selectCombination[step]}
        onSelected={handleValueSelected}
        handleJumpToLast={handleJumpToLast}
      >
        {answers.map((item) => {
          return (
            <SelectItem value={item.key} key={item.value}>
              {item.value}
            </SelectItem>
          );
        })}
      </SelectGroup>
      {step !== 0 && (
        <Button type="questionLast" onClick={jumpToLastQuestion}>
          上一题
        </Button>
      )}
      {step === 18 && (
        <Button type="start" onClick={jumpToLoading}>
          生成报告
        </Button>
      )}
    </div>
  );
};

export default Question;
